import style from './index.module.scss'
import { useEffect, useState } from "react";
import Link from 'next/link'
import { Input, Modal, Form } from 'antd';
const { Search } = Input;

export default function Home(props) {
  console.log(props);
  // 搜索框
  const submit = () => {
    alert('搜索中')
  }
  // 网址菜单部分
  let [items, setItems] = useState(
    [
      { name: '纯server端页面', href: '/hello', img: '' },
      { name: '请求展示页面', href: '/fetch-demo', img: '/images/logo.png' },
      { name: '请求展示页面?t=111', href: '/fetch-demo?t=111', img: '/images/logo.png' },
      { name: '动态路由页面' + props.b[0], href: '/dynamic-route-demo/' + props.b[0], img: '/images/logo.png' },
      { name: '动态路由页面' + props.b[1], href: '/dynamic-route-demo/' + props.b[1], img: '/images/logo.png' },
      { name: '动态路由页面444?kk=11', href: '/dynamic-route-demo/444?kk=11', img: '/images/logo.png' },
      { name: '666', href: '#', img: '/images/logo.png' },
      { name: '777', href: '#', img: '/images/logo.png' },
      { name: '888', href: '#', img: '/images/logo.png' },
      { name: '999', href: '#', img: '/images/logo.png' },
      { name: '1010', href: '#', img: '/images/logo.png' },
      { name: '1111', href: '#', img: '/images/logo.png' },
      { name: '1111', href: '#', img: '/images/logo.png' },
    ]
  )

  const delItem = idx => {
    let temp = items.filter((item, index) => index !== idx)
    setItems(temp)
  }
  let tempEle = (item, idx) => <li key={idx}>
    <i className={style.close} onClick={() => delItem(idx)}>x</i>
    <Link href={item.href} >
      <a>
        <img src={item.img} alt="" />
      </a>
    </Link><br />
    {item.name}
  </li>

  // 弹窗部分
  let [visible, setVisible] = useState(false)
  let showModal = () => {
    setVisible(true);
  };

  let hideModal = () => {
    setVisible(false);
  };

  // 表单部分
  const [form] = Form.useForm();
  useEffect(() => {
    if (!visible) {
      form.resetFields();
    }
  }, [visible])
  const addAddr = async () => {
    if (await form.validateFields()) {
      let { name, addr } = form.getFieldsValue()
      items.push(
        { name, href: addr, img: '/images/logo.png' }
      )
      hideModal()
    }
  }



  return (
    <div className={style.home}>
      <div className={style.logo}>
        <img src="/images/logo.png" alt="" />
      </div>
      <main>
        <Search onPressEnter={submit} onSearch={submit}></Search>
        <ul>
          {
            items.map((item, idx) => {
              if (idx <= 9) {
                return tempEle(item, idx)
              }
            })
          }
          {
            (() => {
              if (items.length <= 9) {
                return <li className={style.add} onClick={showModal}>
                  <a >+</a>
                </li>
              }
            })()
          }
        </ul>
      </main>

      <Modal
        getContainer={false}
        title="添加快捷方式"
        visible={visible}
        onOk={addAddr}
        onCancel={hideModal}
        okText="确认"
        cancelText="取消"
      >
        <Form form={form} layout="vertical" name="userForm">
          <Form.Item name="name" label="名称" rules={[{ required: true, message: '名称必填' }]}>
            <Input />
          </Form.Item>
          <Form.Item name="addr" label="网址" rules={[{ required: true, message: '网址必填' }]}>
            <Input />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  )
}



export async function getStaticProps(context) {
  let b
  await new Promise((res, rej) => {
    setTimeout(() => {
      b = [333, 444]
      res()
    }, 2000)
  })
  console.log('getServerSidePropsContext:', context);
  return {
    props: {
      b
    }
  }
}